<template>
	<main class="home">
		<kui-header :title="`Kui-swiper`">
			<span slot="header-right"></span>
		</kui-header>
		
		<swiper :options="swiperOption" ref="mySwiper">
			<!-- slides -->
			<swiper-slide><div style="height: 100px">I'm Slide 1</div></swiper-slide>
			<swiper-slide><div style="height: 100px">I'm Slide 2</div></swiper-slide>
			<swiper-slide><div style="height: 100px">I'm Slide 3</div></swiper-slide>
			<swiper-slide><div style="height: 100px">I'm Slide 4</div></swiper-slide>
			<swiper-slide><div style="height: 100px">I'm Slide 5</div></swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
		
	</main>
</template>

<script>
	export default {
		name: "Kui-swiper",
		data() {
			return {
				swiperOption: {
					autoplay: {
						delay: 3000,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination',
						dynamicBullets: true,
					},
					loop: true,
				}
			}
		},
		computed: {
		},
		mounted() {
		}
	}
</script>

<style scoped>

</style>